import { FC, useEffect, useState } from "react"
import { IRouteComponentProps, useDispatch, useSelector } from "umi"
import { Form, Input, Button, Table,Select, Switch, Radio, Space  } from 'antd';
import { DownOutlined } from '@ant-design/icons';
const { Option } = Select;
import style from "./poster.less"
import styleComment from "./comment.less"
import { IcommentItem } from "@/utils/comment";

const comment: React.FC<IRouteComponentProps> = () => {
    const [page, setPage] = useState(1)
    const [pageSize, setPageSize] = useState(12)
    const state = useSelector(state => state.comment)
    const [flag, setFlag] = useState(false)
    console.log(state,"comment")
    const dispatch = useDispatch()

    // content: "123"
    // createAt: "2021-06-29T11:28:14.259Z"
    // email: "11@qq.com"
    // hostId: "8d8b6492-32e5-44e5-b38b-9a479d1a94bd"
    // html: "<p>123</p>↵"
    // id: "c78b35c6-9582-4b99-ac25-984f71a063da"
    // name: "卢本伟"
    // parentCommentId: null
    // pass: false
    // replyUserEmail: null
    // replyUserName: null
    // updateAt: "2021-06-29T11:28:14.259Z"
    // url: "/messageboard/messageboard"
    // userAgent: "Chrome 75.0.3770.100 Blink 75.0.3770.100 Windows 10"
    function selectAll(){
        setFlag(!flag)
        console.log("flag",flag)
    }
    const columns = [
        {
            title:()=>{
                return <input type="checkbox" checked={flag} onChange={selectAll}/>
            },
            width:30,
            fixed: 'left',
            render:()=>{
return  <input type="checkbox" checked={flag}  />
            }
        },
        {
            title: '状态',
            width: 100,
            fixed: 'left',
            render:()=>{
return <span>未通过</span>
            }
        },
        {
            title: '称呼',
            width: 100,
            dataIndex: 'name',
        },
        
        {
            title: '联系方式',
            width: 100,
            dataIndex: 'email',
            key: 'age',
        },
        {
            title: '原始内容',
            dataIndex: 'address',
            width: 150,
        },
        {
            title: 'HTML内容',
            dataIndex: 'address',
            key: '2',
            width: 150,
        },
        {
            title: '管理文章',
            dataIndex: 'address',
            key: '3',
            width: 150,
        },
        {
            title: '创建时间',
            dataIndex: 'createAt',
            key: '4',
            width: 150,
        },
        {
            title: '父级评论',
            dataIndex: 'address',
            key: '5',
            width: 150,
        },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width:150,
            align:"center",
            render: (row:IcommentItem) => {

return <div className={styleComment.operater}>
    <span>通过|</span><span>拒绝|</span><span>回复|</span><span>删除|</span>
</div>
            },
        },
    ];




  
  const data = [];
  for (let i = 1; i <= 10; i++) {
    data.push({
      key: i,
      name: 'John Brown',
      age: `${i}2`,
      address: `New York No. ${i} Lake Park`,
      description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
    });
  }


  



  

  
  

    useEffect(() => {
        dispatch({
            type: "comment/getComment",
            payload: { page, pageSize }
        })
    }, [])


    const onFinish = (values: any) => {
        console.log('Success:', values);
        dispatch({
            type: "comment/getComment",
            payload: { ...values, page, pageSize }

        })
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

  
    return <div>

        <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            className={style.form}
        >
            <div className={styleComment.search}>
                <Form.Item
                    className={style.ipt}
                    label="称呼"
                    name="name"
                >
                    <Input placeholder={"请输入称呼"} />
                </Form.Item>
                <Form.Item
                    className={style.ipt}
                    label="Email"
                    name="email"
                >
                    <Input placeholder={"请输入联系方式"} />
                </Form.Item>
                <Form.Item label="状态" name="pass" className={style.ipt}>
                    <Select>
                        <Select.Option value="1">已通过</Select.Option>
                        <Select.Option value="0">未通过</Select.Option>
                    </Select>
                </Form.Item>
            </div>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <div className={style.btns}>
                    <Button type="default" htmlType="reset"> 重置 </Button>
                    <Button type="primary" htmlType="submit">搜索  </Button>
                </div>
            </Form.Item>
        </Form>

        <div className={style.content}>
            <Table
            rowKey="id"
                columns={columns}
                dataSource={state.comment[0]}
                scroll={{ x: 1500 }}
               
            />
              
        </div>
    </div>
}
export default comment